<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>二次开发 | CatchAdmin 官网</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.2">
    <style>a[title="站长统计"]{display:none}</style>
    <script data-ad-client="ca-pub-1505209242532150" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script src="https://v1.cnzz.com/z_stat.php?id=1279921342&amp;web_id=1279921342"></script>
    <meta name="description" content="基于 Thinkphp & Vue 开发的后台管理框架">
    <meta name="keywords" content="catchadmin, 后台管理, 前后端分离, thinkphp后台管理框架, thinkphp前后端分离框架,php, elementui">
    <link rel="preload" href="/assets/css/0.styles.6834c255.css" as="style"><link rel="preload" href="/assets/js/app.d0396f44.js" as="script"><link rel="preload" href="/assets/js/2.1cef47df.js" as="script"><link rel="preload" href="/assets/js/11.981d4461.js" as="script"><link rel="prefetch" href="/assets/js/10.483f2013.js"><link rel="prefetch" href="/assets/js/12.95d2c383.js"><link rel="prefetch" href="/assets/js/13.061c2fe0.js"><link rel="prefetch" href="/assets/js/14.ec2753db.js"><link rel="prefetch" href="/assets/js/15.8ba1c321.js"><link rel="prefetch" href="/assets/js/16.f7f0d34c.js"><link rel="prefetch" href="/assets/js/17.aac0bf62.js"><link rel="prefetch" href="/assets/js/18.2e2fe306.js"><link rel="prefetch" href="/assets/js/19.aee304b3.js"><link rel="prefetch" href="/assets/js/20.86a73bc1.js"><link rel="prefetch" href="/assets/js/21.8992c972.js"><link rel="prefetch" href="/assets/js/22.0a78500a.js"><link rel="prefetch" href="/assets/js/23.06342909.js"><link rel="prefetch" href="/assets/js/24.06fd96a3.js"><link rel="prefetch" href="/assets/js/25.00664d4e.js"><link rel="prefetch" href="/assets/js/26.c3d4b548.js"><link rel="prefetch" href="/assets/js/27.3c6927ad.js"><link rel="prefetch" href="/assets/js/28.74498c0b.js"><link rel="prefetch" href="/assets/js/29.aae1a826.js"><link rel="prefetch" href="/assets/js/3.4d2bdca7.js"><link rel="prefetch" href="/assets/js/30.c7732a2c.js"><link rel="prefetch" href="/assets/js/31.20403043.js"><link rel="prefetch" href="/assets/js/32.7b8e9cfe.js"><link rel="prefetch" href="/assets/js/33.8610da11.js"><link rel="prefetch" href="/assets/js/4.d7b1015b.js"><link rel="prefetch" href="/assets/js/5.ff87de2e.js"><link rel="prefetch" href="/assets/js/6.0e91e688.js"><link rel="prefetch" href="/assets/js/7.ba30e213.js"><link rel="prefetch" href="/assets/js/8.35122549.js"><link rel="prefetch" href="/assets/js/9.081b18e5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6834c255.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active no-logo home-link"><!----> <span class="site-name">CatchAdmin 官网</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          🏠首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/docs/" class="router-link-active">
          📖文档
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/laravel/">
          📖Laravel
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/faq/">
          🤔FAQ
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/donate/">
          🎉赞助名单
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🚀仓库地址
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="ads"><div id="ads_1"><img src="https://cover.kancloud.cn/akasishikelu/thinkphp6!middle"> <span title="基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析">基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析</span></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" title="项目介绍" class="sidebar-link">项目介绍</a></li><li><a href="/docs/install.html" title="项目安装" class="sidebar-link">项目安装</a></li><li><a href="/docs/project-introduce.html" title="目录结构" class="sidebar-link">目录结构</a></li><li><a href="/docs/console.html" title="命令介绍" class="sidebar-link">命令介绍</a></li><li><a href="/docs/request.html" title="请求介绍" class="sidebar-link">请求介绍</a></li><li><a href="/docs/model.html" title="模型介绍" class="sidebar-link">模型介绍</a></li><li><a href="/docs/dataScope.html" title="权限介绍" class="sidebar-link">权限介绍</a></li><li><a href="/docs/extend.html" title="项目扩展" class="sidebar-link">项目扩展</a></li><li><a href="/docs/http.html" title="Http客户端" class="sidebar-link">Http客户端</a></li><li><a href="/docs/excel.html" title="Excel" class="sidebar-link">Excel</a></li><li><a href="/docs/sensitiveWord.html" title="敏感词" class="sidebar-link">敏感词</a></li><li><a href="/docs/crontab.html" title="定时任务新版" class="sidebar-link">定时任务新版</a></li><li><a href="/docs/catch-table.html" title="表格组件" class="sidebar-link">表格组件</a></li><li><a href="/docs/front.html" title="前端开发" class="sidebar-link">前端开发</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h2 id="二次开发"><a href="#二次开发" class="header-anchor">#</a> 二次开发</h2> <p>如果你已经看完上面的其他篇章节的介绍，可能还没法继续进行自己的项目开发。因为群里很多伙伴反应了这个问题，所以这里就专门做一篇文档。
看完你会觉得 So Easy。</p> <p>首先当然需要下载安装文档，请先保证你能正常运行 <code>CatchAdmin</code>。后台正常进入且能访问。而且你也了解了前后端分离的开发模式。那么现在就开始吧。</p> <h2 id="步骤如下"><a href="#步骤如下" class="header-anchor">#</a> 步骤如下</h2> <ul><li>创建模块</li> <li>生成代码</li> <li>创建 View</li> <li>配置动态菜单</li></ul> <p>以创建 CMS 模块为例子。</p> <h2 id="创建模块"><a href="#创建模块" class="header-anchor">#</a> 创建模块</h2> <p>CatchAdmin 提供了很简洁的命令来操作</p> <div class="language-shell extra-class"><pre class="language-shell"><code>php think create:module cms
</code></pre></div><h2 id="创建你的第一个接口"><a href="#创建你的第一个接口" class="header-anchor">#</a> 创建你的第一个接口</h2> <p>进入<code>后台系统管理</code>模块，找到<code>代码生成</code>, 按照流程创建。当然你看提示 <code>success</code> 的时候，你一个<code>restful</code>接口就已经创建成功了。很简单方便。</p> <p>如果你不嫌弃麻烦的话，可以按照下面的步骤走😄</p> <p>下一步进入 <code>cms</code>, 创建 <code>controller</code> 文件夹。命令如下</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token builtin class-name">cd</span> cms <span class="token operator">&amp;&amp;</span> <span class="token function">mkdir</span> controller
</code></pre></div><h4 id="创建控制器。"><a href="#创建控制器。" class="header-anchor">#</a> 创建控制器。</h4> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token builtin class-name">cd</span> controller <span class="token operator">&amp;&amp;</span> <span class="token function">touch</span> Test.php
</code></pre></div><p>编写 <code>Controller</code> 代码, 如下</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">namespace</span> <span class="token package">catchAdmin<span class="token punctuation">\</span>cms<span class="token punctuation">\</span>controller</span><span class="token punctuation">;</span>

<span class="token keyword">use</span> <span class="token package">catcher<span class="token punctuation">\</span>base<span class="token punctuation">\</span>CatchController</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">catcher<span class="token punctuation">\</span>CatchResponse</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">CatchController</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name static-context">CatchResponse</span><span class="token operator">::</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello CatchAdmin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="创建路由"><a href="#创建路由" class="header-anchor">#</a> 创建路由</h4> <p>在 <code>cms</code> 目录下, 创建 <code>route.php</code> 文件，命令如下:</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">touch</span> route.php
</code></pre></div><p>加入路由</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$router</span><span class="token operator">-&gt;</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'test'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'\catchAdmin\cms\controller\Test@index'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>到这里 <code>PHP</code> 的接口就已经创建好了。使用 <code>Postman</code> 访问下能正确返回数据。</p> <h2 id="前端"><a href="#前端" class="header-anchor">#</a> 前端</h2> <p>下面就是重头戏了，目前从反映来看，最让摸不着头脑的就是前端的菜单配置以及如何访问页面。</p> <p>在前端项目进入到根目录，进入到 <code>src/views</code> 目录，为了和后端项目保持统一，所以你需要同样创建 <code>cms</code> 目录。<code>cms</code> 目录
创建后，在创建 <code>test</code> 目录。命令如下:</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token builtin class-name">cd</span> src/views <span class="token operator">&amp;&amp;</span> <span class="token function">mkdir</span> cms <span class="token operator">&amp;&amp;</span> <span class="token builtin class-name">cd</span> cms <span class="token operator">&amp;&amp;</span> <span class="token function">mkdir</span> <span class="token builtin class-name">test</span>
</code></pre></div><p>创建 <code>Vue</code> 文件。</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token builtin class-name">cd</span> <span class="token builtin class-name">test</span> <span class="token operator">&amp;&amp;</span> <span class="token function">touch</span> index.vue
</code></pre></div><p>代码如下:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span> Hello World<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'index'</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style scoped<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p>到这里还是无法正常访问的，所以你需要先创建一个 Map 映射。找到 <code>src/config/componentMap.js</code> 文件，这里就是需要添夹映射的地方。
添加如下代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">test</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/cms/test'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre></div><p>添加完还要添加菜单才可以看到，打开后台管理，找到<code>菜单管理</code>，然后要在 <code>cms</code> 管理模块下增加，</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>cms 管理模块添加的时候组件必须需要选择 <code>layout</code></p></div> <p>然后在 <code>cms</code> 管理模块下添加<code>测试</code>子组件，<strong>关键在组件必须选择 <code>test</code> 组件</strong>，无需刷新页面，添加完之后就可以在左侧看到菜单。测试组件的</p> <ul><li>权限标识要填写 <code>test</code>，也就是控制器名称</li> <li>模块就是填写 CMS。
但是有一点要注意，此时你是 <code>Admin</code> 超级管理员。如果你不是 <code>Admin</code> 超级管理员的话，就必须让当<strong>前角色加入权限菜单</strong>。</li></ul> <p>这样整个流程就结束了。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/catch-admin/document/edit/master/docs/docs/develop.md" target="_blank" rel="noopener noreferrer">在 Github 编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">更新时间:</span> <span class="time">11/23/2020, 6:16:27 PM</span></div></footer> <!----> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.d0396f44.js" defer></script><script src="/assets/js/2.1cef47df.js" defer></script><script src="/assets/js/11.981d4461.js" defer></script>
  </body>
</html>